import React, { useState } from 'react';
import { Table, Space, Button, Modal } from 'antd';
import "./one.css"
let zitiList = [
    {
        id: 5,
        name: "张三",
        area: "2001"
    },
    {
        id: 6,
        name: "张三1",
        area: "201"
    }
];
const One = (props) => {
    const [current, setCurrent] = useState(1)
    const [pageSize, setPageSize] = useState(3)
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [isBModalVisible, setIsBModalVisible] = useState(false);
    const [isBSModalVisible, setIsBSModalVisible] = useState(false);
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
            width: "70px",
            align: "center"
        },
        {
            title: '买家姓名',
            dataIndex: 'name',
            key: 'name',
            width: "70px",
            align: "center"
        },
        {
            title: '买家电话',
            dataIndex: 'haoma',
            key: 'haoma',
            width: "160px",
            align: "center"
        },
        {
            title: '商品图片',
            key: 'img',
            width: "100px",
            align: "center",
            render: (text, record) => (
                <img className="img" src={record.img} alt="" />
            ),
        },
        {
            title: '商品信息',
            dataIndex: 'sxin',
            key: 'sxin',
            width: "160px",
            align: "center"
        },
        {
            title: '买家信息',
            dataIndex: 'mxin',
            key: 'mxin',
            width: "120px",
            align: "center"
        },
        {
            title: '送货方式',
            dataIndex: 'fang',
            key: 'fang',
            width: "100px",
            align: "center"
        },
        {
            title: '支付金额',
            dataIndex: 'qian',
            key: 'qian',
            width: "90px",
            align: "center"
        },
        {
            title: '状态',
            dataIndex: 'lls',
            key: 'lls',
            width: "90px",
            align: "center"
        },
        {
            title: 'Action',
            key: 'action',
            align: "center",
            render: (text, record) => (
                <Space size="middle">
                    <Button type="primary" onClick={showModal}>发货</Button>
                    <Button type="primary">点我达</Button>
                    <Button type="primary" onClick={showBSModal}>修改自提点</Button>
                    <Button type="primary" onClick={showBModal}>备注</Button>
                </Space>
            ),
        },
    ];
    const handleTableChange = (pagination) => {
        setCurrent(pagination.current)
        setPageSize(pagination.pageSize)
    }
    //发货
    const showModal = () => {
        setIsModalVisible(true);
    }
    const handleOk = () => {
        setIsModalVisible(false);
    };
    const handleCancel = () => {
        setIsModalVisible(false);
    };
    // 备注
    const showBModal = () => {
        setIsBModalVisible(true);
    }
    const handleBOk = () => {
        setIsBModalVisible(false);
    };
    const handleBCancel = () => {
        setIsBModalVisible(false);
    };
    // 修改自提点
    const showBSModal = () => {
        setIsBSModalVisible(true);
    }
    const handleBSOk = () => {
        setIsBSModalVisible(false);
    };
    const handleBSCancel = () => {
        setIsBSModalVisible(false);
    };
    return (
        <div>
            <Modal title="发货" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <p>发货方式：</p>
                <p>本地：<input type="radio" /> 快递：<input type="radio" /></p>
                <p>
                    <Button type="primary" onClick={handleOk}>发货</Button>
                </p>
            </Modal>
            <Modal title="备注" visible={isBModalVisible} onOk={handleBOk} onCancel={handleBCancel}>
                <p>备注：</p>
                <textarea rows="3" cols="30"></textarea>
            </Modal>
            <Modal title="修改自提点" visible={isBSModalVisible} onOk={handleBSOk} onCancel={handleBSCancel}>
                <p>选择自提点：</p>
                <p>
                    <input type="text" /><button>搜索</button>
                </p>
                <table border="1">
                    <tr>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>自提点地址</th>
                        <th>操作</th>
                    </tr>
                    {
                        zitiList.map(item => <tr>
                            <td>{item.id}</td>
                            <td>{item.name}</td>
                            <td>{item.area}</td>
                            <td><Button type="primary">选择</Button></td>
                        </tr>)
                    }
                </table>
            </Modal>
            <Table rowKey="id" pagination={{ current, pageSize }} onChange={handleTableChange} columns={columns} dataSource={props.data} />
        </div>
    )
}

export default One
